<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑步管理</title>
    <link href= "../css/app.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet"type="text/css"href="../css/realTime.css">
    <script src="../js/jquery-2.1.0.min.js"></script>
    <script src="../js/app.js"></script>
    <script rel="stylesheet" src="../js/echarts.min.js"></script>
</head>
<body>
<div class="contain">
    <div class="title"style="margin-left: 0px;width: 250px;margin-top: 0px;">
        <a href="../ui/teachermanage.html" style="float: left;width: 150px;text-decoration: none">
            <img src="../image/运动世界.png" style="width: 30px;height: 35px;margin-left: 50px;margin-top:10px;float: left">
            <p style="color: #0398ff;margin-left: 20px">运动世界</p>
        </a>
    </div>
    <div class="title">
        <a id="add" href="#" style="color: black;margin-left: -100px">大连东软信息学院</a>
    </div>
    <div class="title" style="margin-top: 5px">
        <span>dldrxxadmin，欢迎您</span>
    </div>
</div>
<div class="touming">
    <div class="show">
        <div class="show-search">
            <input type="text" class="search-text" style="width: 250px;height: 30px;margin-top: 10px;margin-left: 50px" placeholder="请输入学校名称" name="q">
            <button type="submit" class="search-ic"><img src="../image/查找.png" style="width: 15px;height: 15px"></button>
        </div>
        <div style="clear: both"></div>
        <a href="" id="name"style="margin-top: 20px;width: 300px">大连东软信息学院(点击收回)</a>
    </div>
</div>
<div class="logo-right">
    <div class="module">
        <a href="../ui/realTime.html">
            <img src="../image/数据总览.png" style="width: 22px;height: 22px">
            <span style="color: black">数据总览</span>
        </a>
    </div>
    <div class="module">
        <a href="../ui/semestermanage.html">
            <img src="../image/学期管理.png" style="width: 22px;height: 22px">
            <span style="color: black">学期管理</span>
        </a>
    </div>
    <div class="module">
        <a href="../ui/PEadmin.html" >
            <img src="../image/退出.png" style="width: 22px;height: 22px">
            <span style="color: black">退出</span>
        </a>
    </div>
</div>
<div class="sidebar">
    <div class="left">
        <a href="../ui/realTime.html"style="text-decoration: none">实时统计</a>
        <a href="../ui/sportTrend.html"style="text-decoration: none">运动趋势</a>
        <a href="../ui/userAnalysis.html"style="text-decoration: none">用户分析</a>
        <a href="../ui/sportAnalysis.html"style="text-decoration: none">跑步分析</a>
    </div>
</div>
<div class="content">
    <div id="dataScreening">
        <div class="list">
            <div id="main" style="width: 100%;height: 100%"></div>
        </div>
    </div>
</div>
<div class="footer">
    <span  style="margin-left: 120px;">客服电话：400 800 9198</span>
    <span  style="margin-left: 80px;">ZHE JIANG WAN HANG INFORMATION TECHNOLOGY CO. LTD</span>
</div>

<script>
    $('#add').click(function () {
        $('.touming').show();

    })
    $('#show-icon').click(function () {
        $('.touming').hide();
    })
</script>
<script type="text/javascript">
    $(function(){
    })
    function openDialog(){
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block'
    }
    function closeDialog(){
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none'
    }
</script>
<script type="text/javascript">

    //基于准备好的DOM，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //指定图表的配置项和数据
    var option = {
        title:{
            text:'各时段运动',
            textStyle:'normal',
            show:true
        },
        //提示框组件
        tooltip:{
            //坐标轴触发，主要用于柱状图，折线图等
            trigger:'axis'
        },
        //右上角工具条
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },//目前还不知道有啥用
                dataView: { show: true, readOnly: true },//数据视图
                magicType: { show: true, type: ['line', 'bar'] },//折线与柱状的切换
                restore: { show: true },//重置
                saveAsImage: { show: true }//保存为图片
            }
        },
        //图例
        legend:{
            data:['人数']
        },
        color : 'rgb(12, 184, 138)',
        lineStyle : {
            //设置折线粗细
            width : '4'
        },
        //横轴
        xAxis:{
            show:true,
            position:'bottom',
            // type:'category',
            name:'单位：时刻',
            nameLocation:'end',
            // nameTextStyle:''
            data:["00","01","02","03","04","05","06","07","08"]

        },

        //纵轴
        yAxis:{
            name:'单位：人'
        },
        //系列列表。每个系列通过type决定自己的图表类型
        series:[{
            name:'人数',
            //折线图
            type:'line',
            data:[0, 0, 0, 0, 6, 19,13,10]
        }]
    };
    //使用刚指定的配置项和数据显示图表
    myChart.setOption(option);

</script>
</body>
</html>